<template>
  <section
    class="flex w-full flex-col flex-1 table-main"
    v-loading="state.loading"
  >
    <div class="flex mb-10px">
      <div class="flex-1">
        <slot name="btns"> </slot>
      </div>

      <el-button
        size="small"
        :loading="exportLoading"
        v-if="props.hasExport"
        @click="exportExcel"
        icon="download"
        >导出</el-button
      >
      <el-button
        size="small"
        icon="refresh"
        v-if="props.hasRefresh"
        @click="refresh()"
        >刷新</el-button
      >
      <el-button
        icon="refresh"
        v-if="props.hasReset"
        size="small"
        @click="reset()"
      >
        重置
      </el-button>
    </div>
    <div class="el-table-container flex-1 table-main">
      <el-table
        size="small"
        :id="state.tableId"
        border
        :row-key="rowKey"
        ref="tableDom"
        v-bind="$attrs"
        ::show-overflow-tooltip="false"
        :data="state.vxeDatas"
        @selection-change="handleSelectionChange"
        class="cpsVxeTable"
      >
        <el-table-column
          width="50"
          type="index"
          v-if="showIndex"
          label="序号"
          align="center"
        >
        </el-table-column>
        <el-table-column
          width="50"
          type="selection"
          v-if="showCheckbox"
          align="center"
        >
        </el-table-column>

        <template v-for="item in state.vxeColumns" :key="item">
          <el-table-column
            v-bind="item"
            :show-overflow-tooltip="item.showOverflowTooltip || false"
            :width="item.width || calcColumnWidth(item)"
            :align="item.align ?? 'left'"
          >
            <template #header v-if="item.headerSlot">
              <slot :name="item.headerSlot"></slot>
            </template>
            <template #default="scope" v-if="item.slot">
              <slot :name="item.slot" v-bind="scope"></slot>
            </template>
          </el-table-column>
        </template>
        <template #append>
          <slot name="append" />
        </template>
        <!-- 无数据 -->
        <template #empty>
          <div
            class="table-empty py-20px flex justify-center items-center flex-col"
          >
            <slot name="empty">
              <img
                src="@/assets/images/notData.png"
                width="80"
                height="80"
                alt="notData"
              />
              <span>暂无数据</span>
            </slot>
          </div>
        </template>
      </el-table>
    </div>
    <footer ref="pagination" v-if="hasPaginate">
      <el-pagination
        style="text-align: right"
        :background="true"
        :pager-count="5"
        :hide-on-single-page="false"
        v-model:current-page="paginate.pageNum"
        v-model:page-size="paginate.pageSize"
        :total="paginate.total"
        @current-change="page => changePage(page, true)"
        @size-change="page => changePage(page, false)"
        :page-sizes="[50, 100, 200, 400]"
        layout="total, prev, pager, next, sizes, jumper"
      />
    </footer>
  </section>
</template>
<script setup>
import { toRefs } from 'vue'
import { useTable } from './hook'
const props = defineProps({
  value: {
    type: Array
  },
  // 控制是否使用loading
  loading: {
    type: Boolean,
    default: true
  },
  tableId: {
    type: String
  },
  // 是否支持多选
  showCheckbox: {
    type: Boolean,
    default: false
  },
  url: {
    type: String,
    default: ''
  },
  showIndex: {
    type: Boolean,
    default: false
  },
  // 是否显示列设置
  showSetting: {
    type: Boolean,
    default: false
  },
  hasExport: {
    type: Boolean,
    default: false
  },
  hasPrint: {
    type: Boolean,
    default: false
  },
  hasReset: {
    type: Boolean,
    default: false
  },
  hasRefresh: {
    type: Boolean,
    default: true
  },
  // 表格是否显示分页
  hasPaginate: {
    type: Boolean,
    default: true
  },
  // 是否显示操作项目
  hasAction: {
    type: Boolean,
    default: false
  },

  // 是否立即查询数据，若为false，则手动调refresh或reset
  immediate: {
    type: Boolean,
    default: true
  },
  isCustomWidth: {
    type: Boolean,
    default: true
  },
  // 列宽设置
  columnWidth: {
    type: Object,
    default: () => {
      return {}
    }
  },
  columnFixed: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 拉取table数据的接口参数
  apiParams: {
    type: Object,
    default: () => {
      return {}
    }
  },
  // 场景： 网址带搜索条件，打开网站后默认进行过滤搜索
  queryParams: {
    type: Object,
    default: () => {
      return {}
    }
  },
  columns: {
    type: Array,
    default: null
  },
  rowKey: {
    type: [String, Function],
    default: 'id'
  },
  // 使用场景，以某个字段的值为条件，查询满足这个条件下的所有筛选项
  // 列设置的参数
  queryFields: {
    type: Array,
    default: () => {
      return []
    }
  },
  pageSize: {
    type: Number,
    default: 100
  },
  selectedRowKeys: {
    type: Array,
    default: () => {
      return []
    }
  },
  // 发送请求前function
  beforeReqLoad: {
    type: Function,
    default: null
  },
  // 接口响应后function
  afterRespLoad: {
    type: Function,
    default: null
  },
  method: {
    type: String,
    default: 'post'
  },
  respField: {
    type: String,
    default: 'data.list'
  }
})
const emits = defineEmits(['update:value', 'change', 'select', 'export'])
const {
  tableDom,
  state,
  handleSelectionChange,
  // onCancelSelect,
  exportExcel,
  refresh,
  reset,
  changePage,
  getCheckboxRecords,
  queryAllParams,
  calcColumnWidth
} = useTable(props, emits)

const { paginate } = toRefs(state)

defineExpose({
  getCheckboxRecords,
  reset,
  refresh,
  queryAllParams
})
</script>

<style lang="scss">
.flex-1 {
  flex: 1;
}
.cpsVxeTable {
  .el-checkbox.el-checkbox--small .el-checkbox__inner {
    width: 16px;
    height: 16px;
  }
}
</style>
